<template>
  <!-- 添加审核人弹出框 -->
  <el-dialog
    :visible.sync="checkPeopleDialogVisible"
    width="60%"
    append-to-body
    title="选择人员"
    :before-close="close"
  >
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="部门" prop="deptId">
        <el-cascader
          placeholder="点击选择上级部门"
          :options="deptList"
          v-model="dataForm.deptId"
          :props="deptListTreeProps"
          filterable
          clearable
          @clear="getUserList()"
          change-on-select
        ></el-cascader>
      </el-form-item>
    </el-form>
    <hr />
    <div>
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="姓名">
          <el-input
            v-model="dataForm.realname"
            placeholder="请输入姓名"
            clearable
            @clear="getUserList()"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select
            v-model="dataForm.gender"
            placeholder="请选择性别"
            style="width:100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄:">
          <el-input-number
            type="number"
            v-model="dataForm.age"
            placeholder="年龄以下"
            controls-position="right"
            :min="1"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="dataForm.mobile" placeholder="手机号码" clearable @clear="getUserList()"></el-input>
        </el-form-item>
        <el-form-item label="学历:" prop="education">
          <el-select
            v-model="dataForm.education"
            placeholder="请选择学历"
            :loading="dutyLoading"
            style="width: 100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option
              v-for="item in educationList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input
            v-model="dataForm.jobNumber"
            placeholder="员工编号"
            clearable
            @clear="getUserList()"
          ></el-input>
        </el-form-item>
        <el-form-item label="工种:" prop="craftName">
          <el-select
            v-model="dataForm.craftName"
            placeholder="点击选择工种"
            style="width: 100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option
              v-for="item in typeworkList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证:" prop="identityCard">
          <el-input
            v-model="dataForm.identityCard"
            placeholder="请输入身份证号码"
            clearable
            style="width: 100%"
            @clear="getUserList()"
          />
        </el-form-item>
        <el-form-item label="职务:" prop="duty">
          <el-select
            v-model="dataForm.duty"
            placeholder="请选择职务"
            :loading="dutyLoading"
            style="width: 100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option
              v-for="item in dutyList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="职称:" prop="professionalTitle">
          <el-select
            v-model="dataForm.professionalTitle"
            placeholder="请选择职称"
            :loading="dutyLoading"
            style="width: 100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option
              v-for="item in professionalTitleList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="政治面貌:" prop="politicCountenance">
          <el-select
            v-model="dataForm.politicCountenance"
            placeholder="请选择政治面貌"
            :loading="dutyLoading"
            style="width: 100%"
            filterable
            clearable
            @clear="getUserList()"
          >
            <el-option
              v-for="item in politicCountenanceList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <!--          <el-form-item label="出生日期">-->
        <!--            <el-input v-model="dataForm.mobile" placeholder="出生日期" clearable @clear="getUserList()"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="政治面貌">-->
        <!--            <el-input v-model="dataForm.mobile" placeholder="政治面貌" clearable @clear="getUserList()"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="文化程度">-->
        <!--            <el-input v-model="dataForm.mobile" placeholder="文化程度" clearable @clear="getUserList()"></el-input>-->
        <!--          </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="getUserList(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="learn-drawer-personnel-box">
      <el-table
        :data="dataList"
        style="width: 100%"
        max-height="230"
        how-overflow-tooltip
      >
<!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-button type="text" :t="scope" @click="checkAll()">全选</el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" v-if="!scope.row.isChecked" @click="checkOne(scope.row)">选择</el-button>
            <el-button type="text" disabled v-else>已选择</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="realname" label="姓名" width="180"></el-table-column>
        <el-table-column prop="gender" header-align="center" align="center" width="80" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender==1">男</el-tag>
            <el-tag v-else-if="scope.row.gender==2">女</el-tag>
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="deptName" label="部门名称" width="180"></el-table-column>
        <el-table-column prop="jobNumber" label="员工编号"></el-table-column>
        <el-table-column prop="identityCard" label="身份证号"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentUserChangeHandle"
        :current-page="page"
        :page-sizes="[10, 20, 50]"
        :page-size="limit"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onsubmit" :loading="loading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'

export default {
  name: 'checkPeople',
  data() {
    return {
      loading: false,
      dutyLoading: false,
      checkPeopleDialogVisible: false,
      value: 0,
      page: 1,
      limit: 10,
      totalCount: 0,
      dataList: [],
      multipleSelection: [],
      deptList: [],
      userIds: [],
      dutyList: [],
      professionalTitleList: [],
      politicCountenanceList: [],
      educationList: [],
      typeworkList: [],
      dataForm: {
        type: 'DUTY',
        realname: '',
        jobNumber: '',
        mobile: '',
        deptId: '',
        age: '',
        education: '',
        identityCard: '',
        duty: '',
        gender: null,
        professionalTitle: '',
        craftName: '',
        politicCountenance: ''
      },
      deptListTreeProps: {
        checkStrictly: true,
        emitPath: false,
        expandTrigger: 'hover',
        label: 'name',
        value: 'id',
        children: 'children'
      }
    }
  },
  props: ['checkedUserList', 'setUserList'],
  methods: {
    init(userIds) {
      this.loading = false
      this.checkedUsers = JSON.parse(JSON.stringify(this.checkedUserList))
      this.dataForm = {}
      this.getDutyList()
      this.getTypeworkList()
      this.userIds = userIds
      this.getUserList()
      this.checkPeopleDialogVisible = true
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/list'),
        method: 'post'
      }).then(data => {
        for (let i = 0; i < data.data.length; i++) {
          if (data.data[i].deptId === -1) {
            data.data.splice(i, 1)
          }
        }
        this.deptList = data.data
        this.deptList = treeDataTranslate(this.deptList, 'id')
      })
    },
    checkAll() {
      this.dataList.forEach(item => {
        if (!item.isChecked) {
          this.$set(item, 'isChecked', true)
          this.checkedUsers.push(item)
        }
      })
    },
    checkOne(user) {
      this.$set(user, 'isChecked', true)
      this.checkedUsers.push(user)
    },
    onsubmit() {
      this.loading = true
      this.checkPeopleDialogVisible = false
      this.setUserList(this.checkedUsers)
    },
    getUserList(page) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/user/list'),
        method: 'post',
        data: {
          realname: this.dataForm.realname,
          mobile: this.dataForm.mobile,
          duty: this.dataForm.duty,
          identityCard: this.dataForm.identityCard,
          professionalTitle: this.dataForm.professionalTitle,
          craftName: this.dataForm.craftName,
          page: page || this.page,
          limit: this.limit,
          education: this.dataForm.education,
          age: this.dataForm.age,
          jobNumber: this.dataForm.jobNumber,
          gender: this.dataForm.gender,
          deptId: this.dataForm.deptId,
          politicCountenance: this.dataForm.politicCountenance
        }
      }).then(res => {
        res.data.list.forEach(item => {
          let isChecked = this.checkedUsers.findIndex(x => x.userId === item.userId) > -1
          item.isChecked = isChecked
        })
        this.dataList = res.data.list
        this.totalCount = res.data.totalCount
      })
    },
    async getDutyList() {
      this.dutyLoading = true
      let list = await this.$http({
        url: this.$http.adornUrl(
          '/usercenter-admin/dict/getDictItemGroupByTypeList'
        ),
        method: 'post'
      })
      this.dutyLoading = false
      this.dutyList = list.data.dutyList
      this.educationList = list.data.educationList
      this.politicCountenanceList = list.data.politicCountenanceList
      this.professionalTitleList = list.data.professionalTitleList
    },
    // 获取工种列表
    async getTypeworkList() {
      this.$http({
        url: this.$http.adornUrl(`/usercenter-admin/user/craft/list`),
        method: 'post'
      }).then(res => {
        this.typeworkList = res.data
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.limit = val
      this.getUserList()
    },

    // 用户列表翻页
    currentUserChangeHandle(val) {
      this.page = val
      this.getUserList()
    },
    close() {
      this.checkPeopleDialogVisible = false
    },
    // 菜单树选中
    deptListTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptName = data.name
      this.dataForm.deptId = data.id
    },
    // 菜单树设置当前选中节点
    deptListTreeSetCurrentNode() {
      this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
      this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
    }
  }
}
</script>

<style scoped>
</style>
